<template>
  <div class="editorPage">
    <div class="headline">
      <input type="text" placeholder="请输入标题(最多30字)" v-model="textArea.title">
    </div>
    <div class="editor" ref="editorDom">
    </div>
    <div class="submit">
      <el-button type="primary" @click="onSubmit">立即发布</el-button>
      <el-button>取消</el-button>
    </div>
  </div>

</template>

<script>


import E from "wangeditor"

export default {
  
 data() {
    return {
     editor:null,
     textArea:{
       title:'',
       text:'',
       email:'',
     },
    }
 },
 mounted(){
   this.createEditor();
 },
methods:{
  // 创建富文本对象
  createEditor(){
    const _this = this;
    _this.editor = new E(_this.$refs.editorDom);
    // _this.editor.config.uploadImgServer = 'http://localhost:8150/artical/saveImg.do';
    _this.editor.config.uploadImgShowBase64 = true;//以base64的方式存储到txt文件后期使用IO流的方式读出
    // _this.editor.config.showLinkImg = false;  //是否显示图片连接
    
    //监听文本域的内容变化
    _this.editor.config.onchange  = html =>{ 
      _this.textArea.text = html; 
      console.log(_this.textArea.text);
    };
	  _this.editor.config.uploadImgMaxSize = 20 * 1024 * 1024; // 将图片大小限制为 3M
    _this.editor.config.uploadFileName='file';
    _this.editor.config.uploadImgHooks = {
       fail: (xhr, editor, result) => {
          console.log(result)
            // 插入图片失败回调
          },
          success: (xhr, editor, result) => {
             console.log(result)
            // 图片上传成功回调
          },
          timeout: (xhr, editor) => {
             console.log(result)
            // 网络超时的回调
          },
          error: (xhr, editor) => {
             console.log(result)
            // 图片上传错误的回调
          },
          customInsert: (insertImg, result, editor) => {
            // 图片上传成功，插入图片的回调
            //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
            //这块一定要细心，因为会影响到上传图片成功之后的回显
            console.log(result)
            // console.log(data)
              let url = result.url;
              insertImg(url)
            // }
          }
     };

    _this.editor.create();//创建富文本实例    
    //  $('.editor').attr('style','height:1600px;');

  },
 async onSubmit(){
       // 向服务器请求数据
       if(this.textArea.title!='' && this.textArea.title!=undefined){
         this.textArea.email=window.sessionStorage.getItem('user');
         const {data:res} = await this.$axios.post("artical/saveText.do",this.textArea)//访问后台
         if(res.res=='ok'){
           this.$message.success('上传成功');
         }else{
           this.$message.error('上传失败');
         }
       }
       else{
         this.$message.error('请输入文章标题');
       }
  }
}
}
</script>

<style lang="less" scoped>
.editorPage{
  // width: 100%;
  width: 100%;
  // height: 1600px;
  height: 100%;
  display: flex;
  position: relative;
  position: fixed;
  justify-content: center;
  flex-direction: column;
  // background-color: aquamarine;
  background-color: rgb(255, 255, 255);
}
.headline{
  width: 80%;
  position: absolute;
  transform: translate(-50%,0%);
  top: 10%;
  left: 50%;
  > input{
    width: 100%;
    border: none;
    outline: none;
    height: 60px;
    font-size: 30px;
  }
}
.editor{
  width: 80%;
  position: absolute;
  transform: translate(-50%,0%);
  // bottom: 0;
  top: 20%;
  left: 50%;
}
.submit{
  width: 20%;
  position: absolute;
  transform: translate(-50%,0%);
  top: 80%;
  left: 50%;
}
</style>